<template>
    <div class="e-form">
        <div class="tabs warningTabs" v-if="Object.keys(formData).length != 0">
             <el-tabs tab-position="left" v-model="tabsName" @tab-click="onChangeTab">
                 <!-- 基本信息 -->
                <el-tab-pane label="基本信息" name="equipInfo" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="评价条目" name="evaluate" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="处罚条目" name="punish" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="奖励条目" name="reward" :disabled="clickTabFlag"></el-tab-pane>
                <div>
                    <div id="equipInfoCon">
                        <div class="tabs-title" id="equipInfo">基本信息</div>
                        <div style="width: 100%" class="form">
                            <el-form ref="form" :model="formData" :rules="rules" label-width="200px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="外包方类型：" prop="outerTypeValue">
                                            <el-select
                                                v-model="formData.outerTypeValue"
                                                placeholder="请选择"
                                                @change="outerChange"
                                            >
                                                <el-option
                                                    v-for="(
                                                        item, index
                                                    ) in outsourcerType"
                                                    :key="index"
                                                    :label="item.kvKey"
                                                    :value="item.kvValue"
                                                >
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="评分表：" prop="templateName">
                                            <el-input
                                                placeholder="请输入内容"
                                                v-model="formData.templateName"
                                                clearable>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="录入机构："  prop="orgName">
                                            <span>{{ formData.orgName }}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>

                    <div id="evaluateCon">
                        <div class="tabs-title" id="evaluate">评价条目</div>
                        <div style="width: 100%" class="e-table  e-tree-table">
                            <div class="top">
                                <div class="left">
                                    <el-button size="mini" class="btn-blue" @click="addTop('checkDetails')">新增顶级</el-button>
                                </div>
                            </div>
                            <div class="errorMsg" v-if="errorMsg.length>0">
                                <span >
                                    {{ errorMsg.join(',') }}
                                </span>
                            </div>
                            <el-table
                                :data="formData.checkDetails"
                                style="width: 100%; margin-bottom: 20px"
                                row-key="rowKey"
                                border
                                ref="tableRef"
                                v-sortTable="{ 'tableData': formData.checkDetails, '_this': this, 'ref': 'tableRef' }"
                                :tree-props="{
                                    children: 'children',
                                    hasChildren: 'hasChildren',
                                }"
                                :cell-class-name="cellClsNm"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                class="table"
                            >
                                <el-table-column label="序号" type="index" width="55" fixed> </el-table-column>
                                <el-table-column label="操作" fixed width="250px" align="left">
                                    <template slot-scope="{ row }">
                                        <div class="oparation_box">
                                            <i
                                                class="el-icon-plus"
                                                style="font-size: 24px"
                                                :class="{
                                                    'icon-plus-active-color': MouseEnterId == row.rowKey
                                                }"
                                                title="添加子级"
                                                @click="addChild(row,'checkDetails')"
                                            ></i>
                                            <i
                                                class="el-icon-delete"
                                                style="font-size: 24px"
                                                :class="{
                                                    'icon-delete-active-color': MouseEnterId == row.rowKey
                                                }"
                                                title="删除"
                                                @click="deleteEle(row,'checkDetails')"
                                            ></i>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dtlName" fixed label="名称" min-width="200px">
                                    <template slot-scope="{ row }">
                                        <el-input v-model="row.dtlName"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score" label="分值" min-width="200px">
                                    <template slot-scope="{ row }">
                                        <el-input v-model.number="row.score" v-if="row.parentId === '0' || row.parentId === null" @change="setChangeType(row)"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <div id="punishCon">
                        <div class="tabs-title" id="punish">处罚条目</div>
                        <div style="width: 100%" class="e-table  e-tree-table">
                            <el-table
                                :data="formData.punishmentDetails"
                                style="width: 100%; margin-bottom: 20px"
                                row-key="dtlId"
                                border
                                ref="tableRef1"
                                v-sortTable="{ 'tableData': formData.punishmentDetails, '_this': this, 'ref': 'tableRef1' }"
                                :tree-props="{
                                    children: 'children',
                                    hasChildren: 'hasChildren',
                                }"
                                :cell-class-name="cellClsNm"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                            >
                                <el-table-column label="序号" type="index" width="55" fixed> </el-table-column>
                                <el-table-column label="操作" fixed width="250px" align="left">
                                    <template slot-scope="{ row }">
                                        <div class="oparation_box">
                                            <i
                                                class="el-icon-plus"
                                                style="font-size: 24px"
                                                :class="{
                                                    'icon-plus-active-color': MouseEnterId == row.rowKey
                                                }"
                                                @click="addChild(row,'punishmentDetails')"
                                            ></i>
                                            <i
                                                class="el-icon-delete"
                                                style="font-size: 24px"
                                                :class="{
                                                    'icon-delete-active-color': MouseEnterId == row.rowKey
                                                }"
                                                @click="deleteEle(row,'punishmentDetails')"
                                                v-if="row.parentId !== '0' && row.parentId !== null"
                                            ></i>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dtlName" fixed label="名称" min-width="200px">
                                    <template slot-scope="{ row }">
                                        <span v-if="row.parentId === '0' || row.parentId === null">{{ row.dtlName }}</span>
                                        <el-input v-model="row.dtlName" v-else @change="setChangeType(row)"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <div id="rewardCon">
                        <div class="tabs-title" id="reward">奖励条目</div>
                        <div style="width: 100%" class="e-table  e-tree-table">
                            <div class="top">
                                <div class="left">
                                    <el-button size="mini" class="btn-blue" @click="addTop('rewardDetails')">新增顶级</el-button>
                                </div>
                            </div>
                            <el-table
                                :data="formData.rewardDetails"
                                style="width: 100%;"
                                row-key="dtlId"
                                border
                                ref="tableRef2"
                                v-sortTable="{ 'tableData': formData.rewardDetails, '_this': this, 'ref': 'tableRef2' }"
                                :tree-props="{
                                    children: 'children',
                                    hasChildren: 'hasChildren',
                                }"
                                :cell-class-name="cellClsNm"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                            >
                                <el-table-column label="序号" type="index" width="55" fixed> </el-table-column>
                                <el-table-column label="操作" fixed width="250px" align="left">
                                    <template slot-scope="{ row }">
                                        <div class="oparation_box">
                                            <i
                                                class="el-icon-plus"
                                                style="font-size: 24px"
                                                :class="{
                                                    'icon-plus-active-color': MouseEnterId == row.rowKey
                                                }"
                                                @click="addChild(row,'rewardDetails')"
                                            ></i>
                                            <i
                                                class="el-icon-delete"
                                                style="font-size: 24px"
                                                :class="{
                                                    'icon-delete-active-color': MouseEnterId == row.rowKey
                                                }"
                                                @click="deleteEle(row,'rewardDetails')"
                                            ></i>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dtlName" fixed label="名称" min-width="200px">
                                    <template slot-scope="{ row }">
                                        <el-input v-model="row.dtlName"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score" label="分值" min-width="200px">
                                    <template slot-scope="{ row }">
                                        <el-input v-model.number="row.score" @change="setChangeType(row)"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </el-tabs>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                size="small"
                class="btn-blue"
                @click="preserve"
            >保存</el-button>
            <el-button
                type="primary"
                size="small"
                class="btn-red"
                @click="onDel"
            >删除</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </div>
        <div id="seat" :style="{height: seatHeight + 'px'}"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import $ from 'jquery'
import '@/utils/jquery.scrollTo.min'
import { throttle, parseList, showLoading, hideLoading } from '@/utils/common'
import { getBillId, initPunishmentDetails } from '@/api/base/outsourcer'
export default {
    props: {
        categoryId: {
            type: String,
            default: ''
        },
        categoryName: {
            type: String,
            default: ''
        },
        isEdit: {
            type: String,
            default: ''
        },
        equipData: {
            type: Object,
            default: ()=>{}
        },
        outsourcerType: {
            type: Array,
            default: ()=> []
        },
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            unitMeasure: state => state.equip.equipData.unitMeasure//计量单位
        }),
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 80 - this.lastConHeight
        }
    },
    data () {
        return {
            tabsName: 'equipInfo',
            tabArr: [],
            errorMsg: [],
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            formData: {
            },
            stateList: [
                {
                    label: '停用',
                    value: '1'
                },
                {
                    label: '启用',
                    value: '2'
                },
            ], //设备状态
            rules: {
                outerTypeValue: [
                    { required: true, message: '请选择外包方类型', trigger: ['blur', 'change'] },
                ],
                templateName: [
                    { required: true, message: '请输入评分表', trigger: 'blur' },
                ],
            },
            mapData: {},
            MouseEnterId: 0,
            errorList: [], // 控制导航栏感叹号的显示
            winEvent: {}
        }
    },
    watch: {
        //给错误标签加上提醒
        errorList: newData=>{
            const tabs = document.querySelectorAll('.el-tabs__item')
            tabs.forEach(DOM=>{
                const { childNodes } = DOM
                if(childNodes.length > 1) {
                    DOM.removeChild(childNodes[1])
                }
            })
            newData.forEach(item=>{
                const itemDom = document.querySelector(`#tab-${item}`)
                var element = document.createElement('i')
                element.className = 'el-icon-warning-outline warning'
                itemDom.appendChild(element)
            })
        },
    },
    async created () {
        this.userId = localStorage.getItem('userId')
        this.userName = localStorage.getItem('userName')
        if(this.isEdit === 'add') {
            this.formData = {
                'billDate': '',
                'billNo': '',
                'checkDetails': [
                ],
                'id': '',
                'isUsed': 0,
                'orgId': '',
                'orgName': '',
                'outerTypeKey': '',
                'outerTypeValue': '',
                'punishmentDetails': [
                ],
                'rewardDetails': [
                ],
                'state': 0,
                'templateName': '',
                'useDate': '',
                ...this.userInfo.orgInfo
            }
            showLoading()
            const resData = await initPunishmentDetails()
            const ids = await getBillId(5)
            hideLoading()
            resData.forEach((item, index) => {
                item.dtlId = ids[index]
                item.rowKey = item.dtlName
            })
            this.formData.punishmentDetails = resData
        } else if(this.isEdit === 'edit') {
            this.equipData.punishmentDetails.forEach(item => {
                if (item.parentId === null) {
                    item.parentId = '0'
                }
            })
            this.equipData.punishmentDetails = parseList(this.equipData.punishmentDetails, 'dtlId', 'parentId', '0')
            this.formData = this._.clone(this.equipData)
            this.setKey()
        }
        this.getDicValue()
    },
    mounted () {
        // 获取最后一个内容区域的高度，计算底部空白
        this.getLastConHeight()

        // 保存所有tabName
        const arr = ['equipInfo', 'evaluate', 'punish', 'reward']
        this.tabArr = arr
        let $idsTop = []
        const onScroll = () => {
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            if (this.clickTabFlag) {
                return
            }
            if (!$idsTop[$idsTop.length - 1]) {
                $idsTop = arr.map(item => {
                    const $item = document.getElementById(item)
                    let itemTop = null
                    if ($item) {
                        itemTop = $item.offsetTop
                    }
                    return itemTop
                })
            }
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            // 倒序查找
            let curLocal = 0
            for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                let item = $idsTop[i]
                if (scrollTop + 1 >= item) {
                    curLocal = i
                    break
                }
            }
            // 设置对应tabName
            this.tabsName = arr[curLocal]
        }
        this.winEvent.onScroll = onScroll
        window.addEventListener('scroll', this.winEvent.onScroll)
        this.screenWidth = document.documentElement.clientWidth
        this.screenHeight = document.documentElement.clientHeight
        const onResize = () => {
            this.screenWidth = document.documentElement.clientWidth
            this.screenHeight = document.documentElement.clientHeight
            $idsTop = arr.map(item => {
                const itemTop = document.getElementById(item).offsetTop
                return itemTop
            })
        }
        this.winEvent.onResize = throttle(onResize, 500)
        window.addEventListener('resize', this.winEvent.onResize)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.winEvent.onScroll)
        window.removeEventListener('resize', this.winEvent.onResize)
    },
    methods: {
        //获取当前使用的字典
        getDicValue () {
            this.$store.dispatch('equip/setUnitMeasur')//更新计量单位
        },
        //保存
        preserve () {
            this.clearError('equipInfo')
            this.clearError('evaluate')
            this.clearErrorMsg()
            this.$refs.form.validate(valid=>{
                if(valid) {
                    const findObj = this.outsourcerType.find(item => item.kvValue === this.formData.outerTypeValue)
                    if (findObj) {
                        this.formData.outerTypeKey = findObj.kvKey
                    }
                    if (this.formData.checkDetails.length) {
                        const count = this.formData.checkDetails.reduce((curr, prev) => {
                            return curr + prev.score
                        }, 0)
                        if (count !== 100) {
                            this.setErrortMsg('评价条目 顶级分值总分不为100')
                            this.setError('evaluate')
                            this.$nextTick(() => {
                                this.scorllError()
                            })
                            return
                        }
                    }
                    this.updateData()
                    this.$emit('save', this.formData)
                } else {
                    this.setError('equipInfo')
                    this.$nextTick(() => {
                        this.scorllError()
                    })
                }
            })
        },
        onDel () {
            this.$emit('del', this.formData)
        },
        cellClsNm () {
            return ''
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.rowKey
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //取消
        handleClose () {
            this.$emit('onCancel')
        },
        async addTop (field) {
            if(!field) return
            const fn = obj => {
                let arr = [...this.formData[field]]
                let rowKey = field + '-' + (arr.length + 1)
                obj.hasChildren = obj.isEnd === 0 ? true : false
                obj.rowKey = rowKey
                arr.push(obj)
                this.$set(this.formData, field, arr)
            }
            showLoading()
            const id = await getBillId(1)
            hideLoading()
            switch (field) {
            case 'checkDetails':
                fn({
                    'children': [],
                    'content': '',
                    'creaditRatingTypeKey': '',
                    'creaditRatingTypeValue': '',
                    'dtlId': id[0],
                    'dtlName': '',
                    'id': '',
                    'isEnd': 1,
                    'parentId': '0',
                    'score': 0,
                    'scoreResult': 0,
                    'sortIndex': 0,
                    'changeType': 1
                })
                break
            case 'punishmentDetails':
                fn({
                    'children': [
                    ],
                    'content': '',
                    'creaditRatingTypeKey': '',
                    'creaditRatingTypeValue': '',
                    'dtlId': id[0],
                    'dtlName': '',
                    'id': '',
                    'isEnd': 1,
                    'parentId': '0',
                    'score': 0,
                    'scoreResult': 0,
                    'sortIndex': 0,
                    'changeType': 1
                })
                break
            case 'rewardDetails':
                fn({
                    'children': [
                    ],
                    'content': '',
                    'creaditRatingTypeKey': '',
                    'creaditRatingTypeValue': '',
                    'dtlId': id[0],
                    'dtlName': '',
                    'id': '',
                    'isEnd': 1,
                    'parentId': '0',
                    'score': 0,
                    'scoreResult': 0,
                    'sortIndex': 0,
                    'changeType': 1
                })
            }
        },
        async addChild (row, field) {
            const fn = obj=>{
                row.children = row.children || []
                let rowKey = row.rowKey + '-' + (row.children.length + 1)
                obj.rowKey = rowKey
                row.isEnd = 0
                row.children.push(obj)
                if(this.mapData[row.rowKey]) {
                    const { tree, treeNode, resolve } = this.mapData[row.rowKey]
                    this.load(tree, treeNode, resolve)
                } else if (row.children.length === 1) {
                    this.$nextTick(() => {
                        switch (field) {
                        case 'checkDetails':
                            this.$refs.tableRef.store.loadOrToggle(row)
                            break
                        case 'punishmentDetails':
                            this.$refs.tableRef1.store.loadOrToggle(row)
                            break
                        case 'rewardDetails':
                            this.$refs.tableRef2.store.loadOrToggle(row)
                        }
                        // this.$refs.tableRef.store.toggleRowExpansion(row, true)
                    })
                }
            }
            const id = await getBillId(1)
            switch (field) {
            case 'checkDetails':
                fn({
                    'children': [],
                    'content': '',
                    'creaditRatingTypeKey': '',
                    'creaditRatingTypeValue': '',
                    'dtlId': id[0],
                    'dtlName': '',
                    'id': '',
                    'isEnd': 1,
                    'parentId': row.dtlId,
                    'score': 0,
                    'scoreResult': 0,
                    'sortIndex': 0,
                    'changeType': 1
                })
                break
            case 'punishmentDetails':
                fn({
                    'children': [
                    ],
                    'content': '',
                    'creaditRatingTypeKey': '',
                    'creaditRatingTypeValue': '',
                    'dtlId': id[0],
                    'dtlName': '',
                    'id': '',
                    'isEnd': 1,
                    'parentId': row.dtlId,
                    'score': 0,
                    'scoreResult': 0,
                    'sortIndex': 0,
                    'changeType': 1
                })
                break
            case 'rewardDetails':
                fn({
                    'children': [
                    ],
                    'content': '',
                    'creaditRatingTypeKey': '',
                    'creaditRatingTypeValue': '',
                    'dtlId': id[0],
                    'dtlName': '',
                    'id': '',
                    'isEnd': 1,
                    'parentId': row.dtlId,
                    'score': 0,
                    'scoreResult': 0,
                    'sortIndex': 0,
                    'changeType': 1
                })
            }
        },
        deleteEle (row, field) {
            if (row.changeType === 0) {
                row.changeType = -1
            }
            row.changeType = -1
            const fn = data=>{
                for(let i = 0;i < data.length;i++) {
                    if(data[i].rowKey === row.rowKey) {
                        data.splice(i, 1)
                        break
                    }else{
                        fn(data[i].children)
                    }
                }
            }
            fn(this.formData[field])
        },
        updateData () {
            const fn = data=>{
                for(let i = 0;i < data.length;i++) {
                    if(data[i].length > 0) {
                        data[i].isEnd === 0
                        fn(data[i].children)
                    }else{
                        data[i].isEnd === 1
                    }
                }
            }
            fn(this.formData.checkDetails)
            fn(this.formData.punishmentDetails)
            fn(this.formData.rewardDetails)
        },
        setKey () {
            const fn = field=>{
                let str = field
                return data1=>{
                    let num
                    data1.forEach((item, index)=>{
                        num = index + 1
                        str += '-' + num
                        item.rowKey = str
                        item.children = item.children ? item.children : []
                        if(item.children.length > 0) {
                            fn(str)(item.children)
                        }
                    })
                }
            }
            fn('checkDetails')(this.formData.checkDetails)
            fn('punishmentDetails')(this.formData.punishmentDetails)
            fn('rewardDetails')(this.formData.rewardDetails)
        },
        load (tree, treeNode, resolve) {
            this.mapData[tree.rowKey] = { tree, treeNode, resolve }
            resolve(tree.children ? tree.children : [])
        },
        // 修改外包方类型
        async outerChange (val) {
            const kvKey = this.outsourcerType.find(x=>x.kvValue === val).kvKey
            const arr = ['C级', 'D级', '安全联合惩戒1年', '安全联合惩戒3年', '安全联合惩戒终身年']
            const arr1 = ['C级', 'D级']
            this.formData.punishmentDetails = []
            const ids = await getBillId(arr.length)
            if(kvKey === '劳务合作' || kvKey === '施工分包' || kvKey === '其他' || kvKey === '其它' ) {
                arr.forEach((item, index) => {
                    let arr = [...this.formData.punishmentDetails]
                    let rowKey = 'punishmentDetails' + '-' + arr.length + 1
                    let obj =  {
                        'children': [
                        ],
                        'content': '',
                        'creaditRatingTypeKey': '',
                        'creaditRatingTypeValue': '',
                        'dtlId': ids[index],
                        'dtlName': item,
                        'id': '',
                        'isEnd': 1,
                        'parentId': '0',
                        'score': 0,
                        'scoreResult': 0,
                        'sortIndex': 0
                    }
                    obj.hasChildren = obj.isEnd === 0 ? true : false
                    obj.rowKey = rowKey
                    arr.push(obj)
                    this.$set(this.formData, 'punishmentDetails', arr)
                })
            }else{
                arr1.forEach((item, index) => {
                    let arr = [...this.formData.punishmentDetails]
                    let rowKey = 'punishmentDetails' + '-' + (arr.length + 1)
                    let obj =  {
                        'children': [
                        ],
                        'content': '',
                        'creaditRatingTypeKey': '',
                        'creaditRatingTypeValue': '',
                        'dtlId': ids[index],
                        'dtlName': item,
                        'id': '',
                        'isEnd': 1,
                        'parentId': '0',
                        'score': 0,
                        'scoreResult': 0,
                        'sortIndex': 0
                    }
                    obj.hasChildren = obj.isEnd === 0 ? true : false
                    obj.rowKey = rowKey
                    arr.push(obj)
                    this.$set(this.formData, 'punishmentDetails', arr)
                })
            }
        },
        setChangeType (row) {
            if (row.changeType !== 1) {
                row.changeType = 2
            }
        },
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                if (document.getElementById('rewardCon')) {
                    const lastConHeight = document.getElementById('rewardCon').offsetHeight
                    this.lastConHeight = lastConHeight
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        onChangeTab (e) {
            $.scrollTo(`#${e.name}`, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        },
        //设置错误标签
        setError (name) {
            if(!this.errorList.find(x=>x === name)) {
                this.errorList.push(name)
            }
        },
        //清除错误标签
        clearError (name) {
            const index = this.errorList.findIndex(x=>x === name)
            if(index !== -1) {
                this.errorList.splice(index, 1)
            }
        },
        //跳转到第一个错误标签
        scorllError () {
            let num = this.tabArr.length
            this.errorList.forEach(item=>{
                let index = this.tabArr.findIndex(x=>x === item)
                num = index < num ? index : num
            })
            const obj = { name: this.tabArr[num] }
            this.tabsName = this.tabArr[num]
            this.onChangeTab(obj)
        },
        setErrortMsg (msg) {
            let index = this.errorMsg.findIndex(x=>x === msg)
            if(index === -1) {
                this.errorMsg.push(msg)
            }
        },
        clearErrorMsg () {
            this.errorMsg = []
        }
    }
}
</script>

<style lang="scss" scoped>
.form {
    margin-top: 10px;
}

.e-table {
    background: #fff;

    /* .top {
    .left {
      padding: 20px;
      padding-top: 0px;
    }
  } */
}

.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep.el-table__row{
    .cell{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
